﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui.css-H.js</title>
    <link rel="stylesheet" type="text/css" href="../../../css/Hui.css" />
    <style type="text/css">
    </style>
</head>
<body>
    <!--############## 开关 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">开关</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme1-color" /> <input type="checkbox" checked class="H-form-switch H-theme1-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme2-color" /> <input type="checkbox" checked class="H-form-switch H-theme2-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme3-color" /> <input type="checkbox" checked class="H-form-switch H-theme3-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme4-color" /> <input type="checkbox" checked class="H-form-switch H-theme4-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme5-color" /> <input type="checkbox" checked class="H-form-switch H-theme5-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme6-color" /> <input type="checkbox" checked class="H-form-switch H-theme6-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme7-color" /> <input type="checkbox" checked class="H-form-switch H-theme7-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme8-color" /> <input type="checkbox" checked class="H-form-switch H-theme8-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme9-color" /> <input type="checkbox" checked class="H-form-switch H-theme9-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-switch H-theme10-color" /> <input type="checkbox" checked class="H-form-switch H-theme10-color" />
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 复选框 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">复选框</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme1-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme1-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme1-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme1-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme2-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme2-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme2-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme2-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme3-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme3-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme3-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme3-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme4-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme4-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme4-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme4-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme5-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme5-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme5-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme5-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme6-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme6-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme6-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme6-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme7-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme7-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme7-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme7-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme8-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme8-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme8-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme8-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme9-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme9-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme9-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme9-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="checkbox" class="H-form-checkbox-radio H-theme10-color"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme10-color"> <input type="checkbox" class="H-form-checkbox-radio H-theme10-color H-border-radius3-px"> <input type="checkbox" checked class="H-form-checkbox-radio H-theme10-color H-border-radius3-px">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 单选按钮 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">单选按钮</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme1-color" name="radio1"> <input type="radio" checked class="H-form-checkbox-radio  H-theme1-color" name="radio1">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme2-color" name="radio2"> <input type="radio" checked class="H-form-checkbox-radio  H-theme2-color" name="radio2">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme3-color" name="radio3"> <input type="radio" checked class="H-form-checkbox-radio  H-theme3-color" name="radio3">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme4-color" name="radio4"> <input type="radio" checked class="H-form-checkbox-radio  H-theme4-color" name="radio4">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme5-color" name="radio5"> <input type="radio" checked class="H-form-checkbox-radio  H-theme5-color" name="radio5">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme6-color" name="radio6"> <input type="radio" checked class="H-form-checkbox-radio  H-theme6-color" name="radio6">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme7-color" name="radio7"> <input type="radio" checked class="H-form-checkbox-radio  H-theme7-color" name="radio7">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme8-color" name="radio8"> <input type="radio" checked class="H-form-checkbox-radio  H-theme8-color" name="radio8">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme9-color" name="radio9"> <input type="radio" checked class="H-form-checkbox-radio  H-theme9-color" name="radio9">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <input type="radio" class="H-form-checkbox-radio  H-theme10-color" name="radio10"> <input type="radio" checked class="H-form-checkbox-radio  H-theme10-color" name="radio10">
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 区域滑块 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">区域滑块</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-horizontal-padding10">
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme1-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme2-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme3-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme4-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme5-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme6-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme7-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme8-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme9-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme10-color" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme1-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme2-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme3-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme4-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme5-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme6-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme7-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme8-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme9-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
        <div class="H-range-area">
            <input type="range" class="H-form-range H-theme10-color H-width100-percent" />
        </div>
        <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 文本框 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">文本框</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-form-row H-padding10">
        <label>手 机：</label>
        <input type="text" class="H-form-text H-flex-item" placeholder="请输入手机号码" />
        <p class="H-theme9-color H-font-size-14">获取验证码</p>
    </div>
    <div class="H-form-row H-padding10">
        <label>身 高：</label>
        <input type="text" class="H-form-text H-flex-item" placeholder="请输入手机号码" />
        <span class="H-icon"><i class="Hui-iconfont Hui-zhengque H-color-ccc"></i></span>
    </div>
    <div class="H-form-row H-padding10">
        <label>体 重：</label>
        <input type="text" class="H-form-text H-flex-item" placeholder="请输入手机号码" />
        <span class="H-icon"><i class="Hui-iconfont Hui-shsb H-color-ccc"></i></span>
    </div>
    <div class="H-form-row H-padding10">
        <label>账 号：</label>
        <input type="text" class="H-form-text H-flex-item" placeholder="请输入账号" />
    </div>
    <div class="H-form-row H-padding10">
        <label>密 码：</label>
        <input type="password" class="H-form-text H-flex-item" placeholder="请输入密码" />
    </div>
    <div class="H-form-row H-padding10">
        <label>确认密码：</label>
        <input type="password" class="H-form-text H-flex-item" placeholder="再次输入密码" />
    </div>
    <div class="H-form-row H-padding10">
        <label>日 期：</label>
        <input type="date" value="2016-03-15" class="H-form-text H-flex-item" placeholder="请输入日期" tapmode="" />
    </div>
    <div class="H-form-row H-padding10">
        <label>邮 箱：</label>
        <input type="email" class="H-form-text H-flex-item" placeholder="请输入邮箱" />
    </div>
    <div class="H-form-row H-padding10">
        <label>区 域：</label>
        <div class="H-range-area H-flex-item ">
            <input type="range" class="H-form-range H-theme9-color H-width100-percent" />
        </div>
    </div>
    <div class="H-form-row H-padding10">
        <label>性 别：</label>
        <input type="radio" class="H-form-checkbox-radio  H-theme9-color" name="gender"> <label>男</label> <input type="radio" checked class="H-form-checkbox-radio  H-theme9-color" name="gender"> <label>女</label>
    </div>
    <div class="H-form-row H-padding10">
        <textarea class="H-textarea H-form-text H-flex-item" placeholder="个人简介"></textarea>
    </div>
    <div class="H-padding10 H-background-white H-text-horizontal-center">
        <button class="H-button H-theme1-bg H-color-white H-border-radius3-px">提交</button> <button class="H-button H-theme7-bg H-color-white H-border-radius3-px">取消</button>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <!--############## 卡片模式 ##############-->
    <div class="H-title-channel H-background-white">
        <span class="H-bold-line H-theme9-bg"></span><label class="H-label-text H-theme9-color">卡片模式</label>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <div class="H-border-card H-margin10">
        <div class="H-form-row H-padding10">
            <label>手 机：</label>
            <input type="text" class="H-form-text H-flex-item" placeholder="请输入手机号码" />
            <p class="H-theme9-color H-font-size-14">获取验证码</p>
        </div>
        <div class="H-form-row H-padding10">
            <label>账 号：</label>
            <input type="text" class="H-form-text H-flex-item" placeholder="请输入账号" />
        </div>
        <div class="H-form-row H-padding10">
            <label>密 码：</label>
            <input type="password" class="H-form-text H-flex-item" placeholder="请输入密码" />
        </div>
        <div class="H-padding10 H-background-white H-text-horizontal-center">
            <button class="H-button H-theme1-bg H-color-white H-border-radius3-px">提交</button> <button class="H-button H-theme7-bg H-color-white H-border-radius3-px">取消</button>
        </div>
    </div>
    <p class="H-margin-bottom10 H-width100-percent H-auto-height"></p>
    <script type="text/javascript"></script>
</body>
</html>